<template>

  <smart-page id="system-menu">
    <template #actions>
      <a-button @click="treePage.toggleTree()" v-text="toggleText"/>
    </template>


    <a-table
        v-model:expandedKeys="expandedKeys"
        :table-layout-fixed="theme.layoutFixed"
        :columns="MENU_COLUMNS"
        :row-key="rowKey"
        :column-resizable="theme.resizable"
        :bordered="theme.bordered"
        :stripe="theme.stripe"
        :sticky-header="theme.sticky"
        :hoverable="theme.hoverAble"
        :loading="theme.loading"
        :data="dataSource">
      <template #icon="{ record }">
        <smart-icon v-if="record.meta.icon" :name="record.meta.icon"/>
      </template>
      <template #apiList="{ record }">
        <a-space wrap>
          <a-tag v-for="(item ,index ) in record.apiList" :key="index" color="arcoblue"> {{ item.label }}</a-tag>
        </a-space>
      </template>

      <template #action="{ record }">
        <a-space>
          <a-link  v-auth="Acl.SYSTEM_MENU_ADD" v-if="record.attribute.value!=='PAGE'" status="success" @click="readCtr.open( {  parentId:record.id,  attribute:'GROUP'} )"> 建分组</a-link>
          <a-link  v-auth="Acl.SYSTEM_MENU_ADD" v-if="record.attribute.value!=='PAGE'" status="normal" @click="editCtr.open( {  parentId:record.id,  attribute:'PAGE'} )"> 建页面</a-link>
          <a-link  v-auth="Acl.SYSTEM_MENU_UPDATE" v-if="record.attribute.value!=='MODULE'" @click="changeRecord(record)" v-text="'修改'"/>
          <a-link v-auth="Acl.SYSTEM_MENU_DELETE" status="danger" @click="onDelete(record)"> 删除</a-link>
        </a-space>
      </template>
    </a-table>

    <group-modal v-if="readCtr.show" :record="readCtr.record" @cancel="readCtr.close"/>
    <page-modal v-if="editCtr.show" :record="editCtr.record" @cancel="editCtr.close"/>
  </smart-page>


</template>
<script lang="ts" setup name="system-settings-menu">
import {onMounted} from 'vue';
import {TreePage} from "@/libs/core";

import {MENU_COLUMNS} from "../resource/colums";

import {SystemHttp} from "../resource/http";
import PageModal from './page-edit.vue'
import GroupModal from './group-edit.vue'
import {Acl} from "@/libs/acl";

const {getMenuList, delMenu} = SystemHttp
const pageConfig = {title: '菜单', rowKey: 'id', nameKey: 'name'}
const treePage = new TreePage(pageConfig).setFetchXhr(getMenuList).setDeleteXhr(delMenu).setPermission(Acl.SYSTEM_MENU_LIST);

const {theme, rowKey, dataSource, editCtr, readCtr, expandedKeys,} = treePage
const {onFetch, onDelete, toggleText} = treePage
const changeRecord = (record) => record.attribute.value === 'GROUP' ? readCtr.open(record) : editCtr.open(record)


onMounted(async () => {
  await onFetch()
  treePage.toggleTree()
})
</script>

<style lang="less" scoped>
:deep( .smart-page-header) {
  margin-bottom: 1px !important;
}
</style>